import Select, { LabeledValue } from 'antd/lib/select';
import React, { useEffect, useState } from 'react';
import { getArea, IArea } from '../../api/threeApi';

interface IProps {
	value?: Array<string | number>;
	onChange?: (res: Array<string | number | undefined>) => void;
}

export default function AreaSelect(props: IProps) {
	const [provinceOption, setProvinceOption] = useState<LabeledValue[]>([]);
	const [cityOption, setCityOption] = useState<LabeledValue[]>([]);
	const [areaOption, setAreaOption] = useState<LabeledValue[]>([]);
	const [province, setProvince] = useState<string | number>();
	const [city, setCity] = useState<string | number>();
	const [area, setArea] = useState<string | number>();
	const [data, setData] = useState<IArea>();
	useEffect(() => {
		getArea().then((res) => {
			setProvinceOption(
				res.districts.map((item) => ({ label: item.name, value: item.code, cities: item.cities })),
			);
			setData(res);
		});
	}, []);

	useEffect(() => {
		if (props.value && data) {
			const [province, city, area] = props.value;
			setProvince(province || undefined);
			setCity(city || undefined);
			setArea(area || undefined);
			if (province) {
				data.districts.forEach((item) => {
					if (item.code === province) {
						setCityOption(
							item.cities.map((cityItem: any) => ({
								label: cityItem.name,
								value: cityItem.code,
								areas: cityItem.areas,
							})),
						);
						if (city) {
							handelAreaOption(item.cities, city);
						}
					}
				});
			}
		}
	}, [props.value, data]);

	const handelAreaOption = (item: any, city: any) => {
		item.forEach((cityItem: any) => {
			if (cityItem.code === city) {
				setAreaOption(
					cityItem.areas.map((item: any) => ({
						label: item.name,
						value: item.code,
					})),
				);
			}
		});
	};

	return (
		<div className="d-f ac form-normal">
			<Select
				value={province}
				placeholder="选择省"
				className="mr16"
				options={provinceOption}
				onChange={(value: any, option: any) => {
					setProvince(value);
					setCity(option.cities[0].code);
					setArea(option.cities[0].areas[0].code);
					// setAreaOption([]);
					const cities = option.cities;
					cities &&
						setCityOption(
							option.cities.map((item: any) => ({
								label: item.name,
								value: item.code,
								areas: item.areas,
							})),
						);
					props.onChange && props.onChange([value, option.cities[0].code, option.cities[0].areas[0].code]);
				}}
			/>
			<Select
				disabled={!cityOption.length}
				value={city}
				placeholder="选择市"
				className="mr16"
				options={cityOption}
				onChange={(value: any, option: any) => {
					setCity(value);
					setArea(option.areas[0].code);
					const areas = option.areas;
					areas &&
						setAreaOption(
							option.areas.map((item: any) => ({
								label: item.name,
								value: item.code,
							})),
						);
					props.onChange && props.onChange([province, value, option.areas[0].code]);
				}}
			/>
			<Select
				disabled={!areaOption.length}
				value={area}
				placeholder="选择区"
				options={areaOption}
				onChange={(value) => {
					setArea(value);
					props.onChange && props.onChange([province, city, value]);
				}}
			/>
		</div>
	);
}
